<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
      }

      .parent-box {
        display: flex;
        overflow-x: hidden;
        scroll-behavior: smooth;
        width: 100%;
        gap: 10px;
        padding: 10px 0;
      }

      .child-box {
        flex: 0 0 auto;
        width: 150px;
        height: 100px;
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
      }

      .scroll-btn {
        width: 40px;
        height: 40px;
        border: none;
        background-color: #4caf50;
        color: white;
        border-radius: 50%;
        cursor: pointer;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .scroll-btn:hover {
        background-color: #45a049;
      }

      .scroll-btn:disabled {
        background-color: #cccccc;
        cursor: not-allowed;
      }

      /* 保持之前的样式不变，只添加以下内容 */
      .parent-box {
        cursor: grab; /* 鼠标悬停时显示抓取手势 */
        user-select: none; /* 防止拖动时选中文本 */
      }

      .parent-box:active {
        cursor: grabbing; /* 拖动时显示抓取中手势 */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <button class="scroll-btn left-btn">&lt;</button>
      <div class="parent-box">
        <div class="child-box">子盒子1</div>
        <div class="child-box">子盒子2</div>
        <div class="child-box">子盒子3</div>
        <div class="child-box">子盒子4</div>
        <div class="child-box">子盒子5</div>
        <div class="child-box">子盒子6</div>
        <div class="child-box">子盒子7</div>
        <div class="child-box">子盒子8</div>
      </div>
      <button class="scroll-btn right-btn">&gt;</button>
    </div>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const parentBox = document.querySelector('.parent-box')
        const leftBtn = document.querySelector('.left-btn')
        const rightBtn = document.querySelector('.right-btn')

        // 子盒子宽度 + 间隙
        const childWidth = 150 + 10 // 150px宽度 + 10px间隙

        // 父盒子可视宽度
        const parentWidth = parentBox.clientWidth

        // 计算一次可以显示多少个子盒子
        const visibleChildren = Math.floor(parentWidth / childWidth)

        // 当前滚动位置
        let scrollPosition = 0

        // 拖动相关变量
        let isDragging = false
        let startX
        let startScrollLeft

        // 更新按钮状态
        function updateButtons() {
          leftBtn.disabled = scrollPosition === 0
          rightBtn.disabled = scrollPosition >= parentBox.scrollWidth - parentBox.clientWidth
        }

        // 左按钮点击事件
        leftBtn.addEventListener('click', function () {
          // 计算新的滚动位置
          scrollPosition = Math.max(0, scrollPosition - visibleChildren * childWidth)
          parentBox.scrollTo({
            left: scrollPosition,
            behavior: 'smooth'
          })

          // 更新按钮状态
          setTimeout(updateButtons, 300) // 等待滚动动画完成
        })

        // 右按钮点击事件
        rightBtn.addEventListener('click', function () {
          // 计算新的滚动位置
          const maxScroll = parentBox.scrollWidth - parentBox.clientWidth
          scrollPosition = Math.min(maxScroll, scrollPosition + visibleChildren * childWidth)
          parentBox.scrollTo({
            left: scrollPosition,
            behavior: 'smooth'
          })

          // 更新按钮状态
          setTimeout(updateButtons, 300) // 等待滚动动画完成
        })

        // 初始化按钮状态
        updateButtons()

        // 响应式处理 - 窗口大小改变时更新
        window.addEventListener('resize', function () {
          updateButtons()
        })

        // ========== 以下是新增的拖动功能代码 ==========

        // 鼠标按下事件 - 开始拖动
        parentBox.addEventListener('mousedown', function (e) {
          isDragging = true
          startX = e.pageX - parentBox.offsetLeft
          startScrollLeft = parentBox.scrollLeft

          // 添加active类以改变鼠标样式
          parentBox.classList.add('active')
        })

        // 鼠标移动事件 - 处理拖动
        parentBox.addEventListener('mousemove', function (e) {
          if (!isDragging) return

          e.preventDefault() // 防止默认行为

          const x = e.pageX - parentBox.offsetLeft
          const walk = (x - startX) * 2 // 乘以2增加拖动灵敏度
          parentBox.scrollLeft = startScrollLeft - walk

          // 更新滚动位置变量
          scrollPosition = parentBox.scrollLeft
          updateButtons()
        })

        // 鼠标释放事件 - 结束拖动
        parentBox.addEventListener('mouseup', function () {
          isDragging = false
          parentBox.classList.remove('active')
        })

        // 鼠标离开容器事件 - 结束拖动
        parentBox.addEventListener('mouseleave', function () {
          isDragging = false
          parentBox.classList.remove('active')
        })

        // 触摸事件支持 - 用于移动设备
        parentBox.addEventListener('touchstart', function (e) {
          isDragging = true
          startX = e.touches[0].pageX - parentBox.offsetLeft
          startScrollLeft = parentBox.scrollLeft
        })

        parentBox.addEventListener('touchmove', function (e) {
          if (!isDragging) return

          const x = e.touches[0].pageX - parentBox.offsetLeft
          const walk = (x - startX) * 2
          parentBox.scrollLeft = startScrollLeft - walk

          scrollPosition = parentBox.scrollLeft
          updateButtons()
        })

        parentBox.addEventListener('touchend', function () {
          isDragging = false
        })
      })
    </script>
  </body>
</html>
